<script setup lang="ts">
import { User } from '@/api/user/type';
import { router } from '@/router';
import { useAuthStore } from '@/store/auth';
import { useUserStore } from '@/store/user';
import { onMounted, ref } from 'vue';
import Set from '@/assets/my/Set.vue';
const user = ref({} as User)

onMounted(async () => {
    if (check()) {
        const useStore = useUserStore();
        user.value = await useStore.doGetUserInfo();
    }
})

const check = () => {
    const authStore = useAuthStore();
    return authStore.getIsLogin;
}

const goLogin = () => {
    router.push("/my/login");
}

const goUserIndex = () => {
    router.push({
        name: 'UserIndex',
        query: {
            'id': user.value.id
        }
    });
}

const goSet = () => {
    router.push("/my/setting")
}

</script>

<template>
    <div class="container-head">
        <div class="content" v-if="check()">
            <div class="info" @click="goUserIndex">
                <div class="avatar">
                    <VanImage :src="user.avatar" width="80" height="80" :round="true"></VanImage>
                </div>
                <div class="text">
                    <p>{{ user.nickname }}</p>
                </div>
            </div>
            <div class="icon">
                <Set @click="goSet"></Set>
            </div>
        </div>
        <div class="content" v-else @click="goLogin">
            <div class="avatar">
                <VanImage :src="user.avatar" width="80" height="80" :round="true"></VanImage>
            </div>
            <div class="text">
                <p>请你先登录</p>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .content {
        display: flex;
        padding: 3%;
        width: 94%;
        align-items: center;
        align-items: center;
        background-image: url('http://web.yunnet.top:12900/witdata/background/my.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover; /* 让背景图基于容器大小伸缩 */
        .icon {
            height: 16%;
            display: flex;
            justify-content: right;
            padding-right: 4%;
        }
        .text {
            padding-left: 10%;
        }
        .info {
            width: 100%;
            height: 74%;
            padding-bottom: 2%;
            display: flex;
            flex-direction: row;
            align-items: center;
            .avatar {
                padding-left: 10%;
            }
            .text {
                padding-left: 10%;
                color: white;
            }
        }
    }
}
</style>